<template>
    <el-row class="contain-box">
        <site-nav/>
        <div class="view-body">
            <el-row>
                <el-form class="inline-form" inline>
                    <el-form-item label="操作者ID">
                        <el-input @clear="search" clearable placeholder="请输入操作者ID" v-model="params.userId"/>
                    </el-form-item>
                    <el-form-item label="姓名">
                        <el-input @clear="search" clearable placeholder="请输入姓名" v-model="params.nameLike"/>
                    </el-form-item>
                    <el-form-item label="登录身份">
                        <el-input @clear="search" clearable placeholder="请输入登录身份" v-model="params.loginIdentity"/>
                    </el-form-item>
                    <el-form-item label="登录方式">
                        <el-input @clear="search" clearable placeholder="请输入登录方式" v-model="params.loginType"/>
                    </el-form-item>
                    <el-form-item label="时间">
                        <el-date-picker
                                v-model="times"
                                type="datetimerange"
                                range-separator="至"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间"
                                format="yyyy-MM-dd HH:mm"
                                value-format="yyyy-MM-dd HH:mm"
                                @clear="search"
                                @change="search"
                        />
                    </el-form-item>
                    <el-form-item label="IP">
                        <el-input @clear="search" clearable placeholder="请输入IP" v-model="params.loginIp"/>
                    </el-form-item>
                    <el-form-item label="登录结果">
                        <el-select clearable filterable placeholder="请选择" v-model="params.success">
                            <el-option value="" label="不限"/>
                            <el-option value="true" label="成功"/>
                            <el-option value="false" label="失败"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="失败原因">
                        <el-input @clear="search" clearable placeholder="请输入失败原因" v-model="params.reasonLike"/>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="search" icon="el-icon-search" type="primary">搜索</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="exportExcel">导出Excel</el-button>
                    </el-form-item>
                </el-form>
            </el-row>
            <el-row>
                <el-col>
                    <el-table :data="list" border size="small">
                        <el-table-column align="center" label="记录ID" prop="loginLogId" width="150"/>
                        <el-table-column align="center" label="用户ID" prop="userId" width="150"/>
                        <el-table-column align="center" label="姓名" prop="name"/>
                        <el-table-column align="center" label="登录时间">
                            <template slot-scope="scope">{{scope.row.loginTime | datetimeFormat}}</template>
                        </el-table-column>
                        <el-table-column align="center" label="登录IP" prop="loginIp"/>
                        <el-table-column align="center" label="登录身份" prop="loginIdentity"/>
                        <el-table-column align="center" label="登录方式" prop="loginType"/>
                        <el-table-column align="center" label="登录成功" width="80">
                            <template slot-scope="scope">
                                <commons-enable :value="scope.row.success"/>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="失败原因" prop="reason"/>
                    </el-table>
                </el-col>
            </el-row>
            <el-row>
                <el-col class="pagination">
                    <el-pagination :current-page="params.pageId" :page-size="params.pageSize" :total="count"
                                   @current-change="currentChange" background layout="total, prev, pager, next"/>
                </el-col>
            </el-row>
        </div>
    </el-row>
</template>
<script lang="ts">
  import {PARAMS} from '@/api/http';
  import Api from '@/api/user/loginLogApi';
  import Entity from '@/structure/loginLog';
  import download from '@/utils/download';
  import {Component, Vue} from 'vue-property-decorator';

  @Component
  export default class Page extends Vue {
    public list: Entity[] = [];
    public count: number | null = null;
    public params: PARAMS = {
      pageId: 1,
      userId: '',
      nameLike: '',
      loginIdentity: '',
      loginType: '',
      loginTimeStartWith: '',
      loginTimeEndWith: '',
      loginIp: '',
      success: '',
      reasonLike: ''
    };
    public times: string[] = [];

    public created(): void {
      this.times[0] = this.$moment(Date.now() - 86400000).format('YYYY-MM-DD HH:mm');
      this.times[1] = this.$moment(Date.now()).format('YYYY-MM-DD HH:mm');
      this.getDataList();
    }

    public getDataList(): void {
      Api.findList(this.getParams()).then((res) => {
        this.list = res.list;
        this.count = res.count;
      });
    }

    public getParams() {
      const params = {...this.params};
      if (this.times && this.times.length === 2) {
        params.loginTimeStartWith = this.times[0];
        params.loginTimeEndWith = this.times[1];
      } else {
        params.loginTimeStartWith = '';
        params.loginTimeEndWith = '';
      }
      return params;
    }

    public currentChange(val: number): void {
      this.params.pageId = val;
      this.getDataList();
    }

    public search(): void {
      this.currentChange(1);
    }

    public exportExcel(): void {
      Api.exportExcel(this.getParams()).then((blob) => {
        download(blob, '登录记录列表 ' + this.$moment(Date.now()).format('YYYY-MM-DD-HH-mm-ss') + '.xlsx');
      });
    }
  }
</script>

